<template>
	<view>
		<u-navbar :title="type" @rightClick="rightClick" :autoBack="true">
		</u-navbar>

		<uni-section class="head" title="">
			<uni-card class="up_bottom">
				<!-- 地图 -->
				<map style="width: 100%; height: 700rpx;" :latitude="position.latitude" :longitude="position.longitude"
					:markers="markers" @markertap="mPoint"></map>
				<!-- 介绍 -->
				<view v-if="data != null && data != ''">
					<view class="br lcfl" style="width: 600rpx;">
						<u-text :text="data.shopName"></u-text>
						<u-text color="blue" :text="distance+'m'" size="20rpx"></u-text>
					</view>
					<view class="flex lcfl up_bottom" style="width: 100%;">
						<view>
							<view class="br flex">
								<u-rate size="20rpx" :readonly="true" gutter="3" :value="data.star"></u-rate>
								<u-text :text="data.star+'分'"></u-text>
							</view>
							<view class="flex">
								<text>营业时间:</text>
								<u-text :text="data.week" size="20rpx"></u-text>
							</view>
							<view class="flex">
								<text>位置:</text>
								<u--text :text="data.shopArea+data.shopAddress" size="20rpx"></u--text>
							</view>
						</view>
						<image style="width: 150rpx;height: 120rpx;" :src="data.shopLicence"></image>
					</view>
					
					<u-popup :show="show" @close="show = false" :round="10">
						<view>
							<view style="display: flex;justify-content: center;"> <text
									style="line-height: 100rpx;font-weight: 600;">{{data.perPhone}}</text></view>
							<u-button @click="copy">复制</u-button>
							<u-button @click="show = false">取消拨号</u-button>
						</view>
					</u-popup>
				</view>

			</uni-card>
		</uni-section>

		<view v-if="id != null && id != ''">
			<u-tabbar :border="false" :value="bar" @change="name => bar = name" :fixed="true" :placeholder="true"
				:safeAreaInsetBottom="true">
				<view class="flex " style="width: 750rpx;padding: 10rpx 20rpx;">
					<u-button @click="showPop('phone')" class="borderRound" size="small" icon="phone"
						iconColor="white">联系门店</u-button>
					<u-button @click="showPop('reserve')" class="borderRound" size="small" icon="clock"
						iconColor="white">立即查看</u-button>
				</view>

			</u-tabbar>
		</view>




	</view>
</template>

<script>
	import {
		getDistanceInMeters
	} from '@/static/js/MapUtil.js'
	export default {
		data() {
			return {
				id: null,
				type: '汽车维修',
				data: null,
				bar: '',
				show: false,
				notice: true,
				noticeMsg: 'safs',

				// 路由参数
				form: {
					id: 1,
					type: '汽车维修',
				},

				// map地图数据
				// >>>>>>>>>>>>>>>>>>>

				distance: 0,
				lastId: 0,
				position: {
					latitude: 34.8049096,
					longitude: 113.300109,
				},

				yours: {
					id: 0,
					latitude: 34.8049096,
					longitude: 113.300109,
					iconPath: '/static/map@1.png',
					title: '商家a',
					info: '自定义信息',
					callout: { // 自定义一直显示的数据，自己的定位信息
						content: "你的位置",
						color: "#0000ff",
						bgColor: '#fff',
						borderRadius: 10,
						padding: 10,
						display: "ALWAYS",
					}
				},
				shopList: [],
				markerItem: {
					id: 2,
					latitude: 34.8040000,
					longitude: 113.300109,
					iconPath: '/static/images/4@2x.png',
					title: '商家b',
					info: '自定义信息',
				},
				markers: [],
				// <<<<<<<<<<<<<<<<<<<<
			}
		},
		onLoad(e) {
			console.log(e);
			if (e == null) {
				return
			}
			if (e.id != null) {
				this.id = e.id
			}

			if (e.type != null) {
				this.type = e.type
			}
			// 获取位置
			this.getMap()


		},
		methods: {
			showPop(type) {
				if (type == null) {
					return
				}
				if (type == 'phone') {
					this.show = true
				}
				if (type == 'reserve') {
					this.form.id = this.id
					this.form.type = this.type
					uni.navigateTo({
						url: `/pages/yunRang/carMaintainReservation/cmr_clean/cmr_clean?form=${JSON.stringify(this.form)}`
					})
				}
			},

			copy() {
				uni.showToast({
					title: '已复制'
				})
				this.show = false
			},

// 地点点击效果
			mPoint(e) {
				console.log(e.detail)
				if (e.detail == null) {
					return
				}
				if (e.detail.markerId == 0) {
					console.log("点击当前地址")
				} else {
					// 获取地址
					this.distance = getDistanceInMeters(e.detail.latitude, e.detail.longitude,
						this.position.latitude, this.position.longitude).toFixed(2);
					console.log("距离当前地址：" + this.distance + "m")

					// 获取商店信息
					this.id = e.detail.markerId
					this.setShopData()
				}
			},

			// 获取地图标记
			getMap() {
				// 获取当前位置
				this.markers[0] = this.yours

				// 获取商家信息
				this.getShopList()


			},
			// 获取商店信息
			getShopList() {
				let that = this
				this.$http({
					url: '/api/shop/shop/list',
					method: 'GET',
					success(res) {
						console.log(res.data)
						that.shopList = res.data.rows
						// that.markers.push(that.markerItem)
						let list = that.shopList
						for (let i = 0; i < list.length; i++) {
							if (i > 3) {
								break;
							}
							let item = {}
							item.id = list[i].shopId
							item.latitude = list[i].latitude
							item.longitude = list[i].longitude
							item.iconPath = that.markerItem.iconPath
							item.title = list[i].shopName
							that.markers.push(item)
						}

						// 获取附近商家位置--test
						// that.markers.push(that.markerItem)

						console.log(that.markers)
					}
				})

			},

			// 展示商店信息
			setShopData() {
				// console.log('id:'+this.id)
				if(this.shopList == null || this.shopList == ''){
					return;
				}
				for (let i = 0; i < this.shopList.length; i++) {
					// console.log(this.shopList[i].shopId)
					if (this.shopList[i].shopId == this.id) {
						this.data = this.shopList[i]
						console.log(this.data)
						return;
					}
				}
			}



		},
	}
</script>

<style lang="scss" scoped>
	.head {
		background-image: url(/static/hBg.png);
		width: 100%;
		height: 400rpx;

		margin-top: 60rpx;
	}

	.br {
		margin-top: 20rpx;
	}

	.lcfl {
		display: flex;
		justify-content: space-between;
	}

	.flex {
		display: flex;
		align-items: center;
	}


	.up_bottom {
		margin-bottom: 150rpx;
	}

	.borderRound {
		border-radius: 100rpx;
	}

	.color-white {
		color: white;
	}

	.u-button {
		background-color: dodgerblue;
		color: white;
	}
</style>